<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <link rel="stylesheet" href="./static/libs/normalize.css">
    <link rel="stylesheet" href="./static/libs/jquery.liMarquee/liMarquee.css"/>
    <link rel="stylesheet" href="./static/libs/font-awesome/font-awesome.min.css">
    <link rel="stylesheet" href="./static/libs/bsv/bsvs.css">
    <link rel="stylesheet" href="./static/css/zhongPing.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./static/libs/swiper.min.css">
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css">
    <style>

    </style>
</head>

<body>
<div id="app" class="bg-01">
    <div id="header" class="header-top">
    </div>
    <div id="main">
        <div id="mapDiv" style="height: 100%;width: 100%;">
        </div>
        <ul class="flex-list impressions">
            <li>
                <ul class="flex-list vert-list bg-li">
                    <li style="flex: 2">
                        <div class="panel panel-01">
                            <div class="panel-headers">
                                <div class="panel-header-title mainTitle">智慧巡查</div>
                            </div>
                            <div class="panel-body panel-bodys">
                                <div class="continer-div continer-divs">
                                    <div class="one-fourth">
                                        <div class="box" v-for="item in tabList">
                                            <img :src="`static/img/index/${item.icon}.png`">
                                            <div class="text">
                                                <p>{{item.name}}</p>
                                                <p>{{item.num}}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="case" style="height: 150px;width: 100%;"></div>
                                </div>

                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="panel panel-01">
                            <div class="panel-headers">
                                <div class="panel-header-title mainTitle">车辆巡检</div>
                            </div>
                            <div class="panel-body panel-bodys">
                                <div class="continer-div">
                                    <div class="box">
                                        <p class="div-bgs" :class="active==1?'acriveClass':''"
                                           @click="active=1">车载巡查平台</p>
                                        <p class="div-bgs" :class="active==2?'acriveClass':''"
                                           @click="active=2">无人机巡查视频</p>
                                    </div>
                                    <div class="grid-box">
                                        <div class="grid-box-div" v-for="i in 3">
                                            <div class="bigs"></div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="panel panel-01">
                            <div class="panel-headers">
                                <div class="panel-header-title mainTitle">核查统计</div>
                            </div>
                            <div class="panel-body panel-bodys">
                                <div class="continer-div">
                                    <div class="box">
                                        <p class="div-bgs" :class="actives==1?'acriveClass':''"
                                           @click="actives=1">核查员</p>
                                        <p class="div-bgs" :class="actives==2?'acriveClass':''"
                                           @click="actives=2">核查中心</p>
                                    </div>
                                    <div class="title-boxs">
                                        <p class="title-p">监督员核查数统计</p>
                                    </div>
                                    <div class="box-prokrt">
                                        <div class="img-box">
                                            <img src="static/img/index/lvping.png"></img>
                                            <p>按时</p>
                                            <p class="clearfix">98%</p>
                                        </div>
                                        <div class="img-box">
                                            <img src="static/img/index/ziping.png"></img>
                                            <p>超时</p>
                                            <p class="clearfix">2%</p>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <div class="panel-headers">
                                <div class="panel-header-title mainTitle">应用仓库</div>
                            </div>
                            <div class="panel-body panel-bodys">
                                <div class="clearfix-box continer-div">
                                    <div class="box-continerE" v-for="item in iconsArr">
                                        <img :src="`static/img/zhongPing/${item.icon}.png`">
                                        <p>{{item.name}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </li>
                </ul>

            </li>
            <li style="flex: 2" class="felx-box-zong">
                <div class="title-p">
                    <p v-for="i in headerBar">{{i.name}}</p>
                </div>
                <div class="pocket-box">
                </div>


            </li>
            <li style="padding-right: 20px">
                <ul class="flex-list vert-list">
                    <li class="bg-li bg-lis">
                        <div class="panel panel-01">
                            <div class="panel-headers">
                                <div class="panel-header-title mainTitle">车辆巡检</div>
                            </div>
                            <div class="panel-body panel-bodys">
                                <div class="continer-div continer-dive">
                                    <div class="aside-bar">
                                        <div :class="{active:videoTab===0}" @click="videoAside(0)">
                                            唐冶街道
                                        </div>
                                        <div :class="{active:videoTab===1}" @click="videoAside(1)">
                                            唐王街道
                                        </div>
                                    </div>
                                    <div class=" grid-boxs">
                                        <div class="grid-box-div" v-for="i in 4">
                                            <div class="bigs"></div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </li>
                    <li class="bg-li bg-lis">
                        <div class="panel panel-01">
                            <div class="panel-headers">
                                <div class="panel-header-title mainTitle">舆情数据</div>
                            </div>
                            <div class="panel-body panel-bodys">
                                <div class="continer-div ">
                                    <div id="public-wordcloud" style="height: 150px"></div>

                                </div>
                            </div>
                    </li>
                    <li class="bg-li bg-lis">
                        <div class="panel panel-01">
                            <div class="panel-headers">
                                <div class="panel-header-title mainTitle">随手拍</div>
                            </div>
                            <div class="panel-body panel-bodys">
                                <div class="continer-div ">
                                    <div class="shoot-list">
                                        <div class="shoot-item" v-for="(item,index) in shootList" :key="index">
                                            <div>
                                                <span class="num">{{item.value}}</span>
                                                <span class="unit">起</span>
                                            </div>
                                            <div class="per">
                                                {{item.name}}({{item.per}}%)
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </li>
                    <li class="bg-li bg-lis">
                        <div>
                            <div class="panel-headers">
                                <div class="panel-header-title mainTitle">12345热线</div>
                            </div>
                            <div class="panel-body panel-bodys">
                                <div class="continer-divsd continer-div">
                                    <div id="barLine" style="width: 100%;height: 180px;"></div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>

            </li>
        </ul>
    </div>
</div>
</body>

<script src="./static/libs/jquery.min.js"></script>
<script src="./static/libs/jquery.liMarquee/jquery.liMarquee.js"></script>
<script src="./static/libs/lodash.min.js"></script>
<script src="./static/libs/jquery.countUp.min.js"></script>
<script src="./static/libs/jquery.waypoints.min.js"></script>
<!-- marquee 无限滚动 -->
<script src="./static/libs/jquery.liMarquee/jquery.liMarquee.js"></script>
<script src="./static/libs/jquery.marquee.plugin.min.js"></script>
<script src="./static/libs/echarts/echarts.min.js"></script>
<script src="./static/libs/echarts/echarts-wordcloud.min.js"></script>
<script src="./static/libs/echarts/theme/theme1.js"></script>
<script src="./static/libs/echarts/map/china.js"></script>
<script src="./static/libs/echarts/map/china-contour.js"></script>
<script src="./static/libs/bsv/bsv.js"></script>
<script src="./static/js/common.js"></script>
<script src="./static/libs/vue.js"></script>
<script src="./static/js/zhongPing.js"></script>
<script src="./static/libs/vue.js"></script>
<script src="./static/libs/elementUI/index.js"></script>
<script src="./static/libs/swiper.min.js"></script>
<script type="text/javascript" src="http://59.206.203.34/api/agsapi/javascript/js/init.js"></script>
<script src="http://59.206.203.34/api/olapi/js/jquery-1.6.4.min.js"></script>

<script type="text/javascript" src="http://59.206.203.34/api/olapi/ol/openlayers.js"></script>

<script>
    /**
     * @Date:2023-09-15 14:16:20
     * @author:songjiangong
     */

    var map1 = new Vue({
        el: '#app',
        data: function () {
            return {
                //今日案件
                tabList: [
                    {
                        icon: 'blueIcon',
                        name: '今日案件',
                        num: '2'
                    },
                    {
                        icon: 'tianBlueIcon',
                        name: '今日案件',
                        num: '22'
                    },
                    {
                        icon: 'yellowIcon',
                        name: '本年案件',
                        num: '792'
                    },
                    {
                        icon: 'redIcon',
                        name: '未结案案件',
                        num: '171 '
                    }
                ],
                active: 1,
                actives: 1,
                //视频赋能右侧tab
                videoTab: 0,
                headerBar:[
                    {
                        name:'总览'
                    },
                    {
                        name:'应急管理'
                    },
                    {
                        name:'城市管理'
                    },
                    {
                        name:'经济发展'
                    },
                    {
                        name:'智慧社区'
                    }
                ],
                iconsArr: [
                    {
                        name: '区智慧执法',
                        icon: 'maozi'
                    },
                    {
                        name: '区应急管理',
                        icon: 'yingji'
                    },
                    {
                        name: '区水务系统',
                        icon: 'shuiwu'
                    },
                    {
                        name: '市智慧环卫平台',
                        icon: 'kefu'
                    },
                    {
                        name: '市运管服平台',
                        icon: 'shuye'
                    },
                    {
                        name: '城管进社区',
                        icon: 'fangzi'
                    },
                ],
                //敏感舆情滚动表格
                publicOpinionList: [
                    {time: '2023-08-19 05:34', content: '中国社科院都阳：中国人口转变的独特性及其影响'},
                    {time: '2023-08-19 05:34', content: '中国社科院都阳：中国人口转变的独特性及其影响'},
                    {time: '2023-08-19 05:34', content: '中国社科院都阳：中国人口转变的独特性及其影响'},
                    {time: '2023-08-19 05:34', content: '中国社科院都阳：中国人口转变的独特性及其影响'},
                    {time: '2023-08-19 05:34', content: '中国社科院都阳：中国人口转变的独特性及其影响'},
                    {time: '2023-08-19 05:34', content: '中国社科院都阳：中国人口转变的独特性及其影响'},
                ],
                //敏感舆情词云
                publicWordcloud: [
                    {name: '7×24服务不打烊', value: Math.random() * 100},
                    {name: '全程网办', value: Math.random() * 100},
                    {name: '7×24服务不打烊', value: Math.random() * 100},
                    {name: '三级督办', value: Math.random() * 100},
                    {name: '全程网办', value: Math.random() * 100},
                    {name: '三级督办', value: Math.random() * 100},
                    {name: '政策计算器', value: Math.random() * 100},
                    {name: '政策计算器', value: Math.random() * 100},
                    {name: '政策计算器', value: Math.random() * 100},
                    {name: '政策计算器', value: Math.random() * 100},
                    {name: '三级督办', value: Math.random() * 100},
                    {name: '三级督办', value: Math.random() * 100},
                    {name: '7×24服务不打烊', value: Math.random() * 100},
                    {name: '7×24服务不打烊', value: Math.random() * 100},
                    {name: '全程网办', value: Math.random() * 100},
                ],
                //便民服务分析金字塔
                serviceAnalyzeData: [
                    {name: '夜市', value: 13},
                    {name: '便民公园', value: 33},
                    {name: '环卫所', value: 43},
                    {name: '停车场', value: 13},
                    {name: '城管执法中队', value: 13},
                ],
                //随手拍
                shootList: [
                    {name: '暴露垃圾', value: 4922, per: 26.2},
                    {name: '经营占道', value: 1961, per: 10},
                    {name: '非法小广告', value: 1213, per: 10},
                    {name: '非法小广告', value: 1213, per: 10},
                    {name: '暴露垃圾', value: 4922, per: 26.2},
                    {name: '经营占道', value: 1961, per: 10},
                ],
            }
        },
        mounted() {

            this.getcase()
            this.getmap()
            this.getWordCloud()
            this.getlineBar()
            console.log(this.publicWordcloud);
        },
        methods: {
            //视频赋能右侧tab
            videoAside(index) {
                this.videoTab = index;
            },
            //敏感舆情词云
            getWordCloud() {
                return initPublicWordCloud(this.publicWordcloud)
            },
            //案件数量统计柱状图
            getcase() {
                return getCharts()
            },
            getmap() {
                // return mapData()
            },
            getWordCloud() {
                return initPublicWordCloud(this.publicWordcloud)
            },
            getlineBar() {
                return initLineBar()
            },
        }

    })
</script>

</html>
